<template>
  <div>
    <Container>
      <div class="cart_top_nav">
        <van-nav-bar title="购物车" @click-left="onClickLeft">
          <template #left>
            <div class="left_title" ref="left">编辑</div>
          </template>
        </van-nav-bar>
      </div>
      <div class="cart_hidden"></div>
      <van-empty
        v-show="cartData.length <= 0"
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="购物车空空如也~~~"
      />
      <div v-show="editShow">
        <van-card
          v-for="(item, index) in cartData"
          :key="index"
          :price="item.item.minPrice"
          :title="item.item.name"
          class="goods-card"
          :thumb="item.item.pic"
        >
          <template #num>
            <!-- Stepper 步进器 -->
            <van-stepper
              v-model="item.num"
              theme="round"
              button-size="22"
              disable-input
              @plus="add(item.item)"
              @minus="minus(item.item)"
            />
          </template>
        </van-card>
      </div>

      <div v-show="!editShow">
        <van-row v-for="(item, index) in cartData" :key="index">
          <van-swipe-cell>
            <van-col span="3">
              <div class="cart_checked">
                <van-checkbox
                  v-model="item.checked"
                  :checked="item.checked"
                  @click="clickCheck(item)"
                ></van-checkbox>
              </div>
            </van-col>
            <van-col span="21">
              <!-- Card 卡片 -->
              <van-card
                :price="item.item.minPrice"
                :title="item.item.name"
                class="goods-card"
                :thumb="item.item.pic"
              >
                <template #num>
                  <!-- Stepper 步进器 -->
                  <van-stepper
                    v-model="item.num"
                    theme="round"
                    button-size="22"
                    disable-input
                    @plus="add(item.item)"
                    @minus="minus(item.item)"
                  />
                </template>
              </van-card>
            </van-col>
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="del(item.item)"
              />
            </template>
          </van-swipe-cell>
        </van-row>
      </div>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        猜你喜欢
      </van-divider>
      
      <Title :TwoTitle="PopularTitle"></Title>
      <GoodsItem :goods="goods"></GoodsItem>

      <van-submit-bar
        :price="this.$store.getters.SumTotal"
        button-text="提交订单"
         @submit="onSubmit"
      >
        <van-checkbox
          v-model="allChecked"
          :checked="allChecked"
          :disabled="editShow"
          >全选</van-checkbox
        >
      </van-submit-bar>
      <div class="cart_bottom_hideen"></div>
    </Container>
  </div>
</template>
<script>
import Container from "../components/container/Container"; //引入子组件（容器组件）
import Title from "../components/title/Title";//引入标题组件
import GoodsItem from "../components/goodsList/GoodsItem";//引入人气推荐组件
import Vue from "vue";
import { Col, Row, SubmitBar } from "vant";
import {
  Checkbox,
  CheckboxGroup,
  SwipeCell,
  Card,
  Stepper,
  Button,
  Empty,
  NavBar,
  Divider,
} from "vant";
import mutationTypes from "../store/config.js";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(SwipeCell);
Vue.use(Card);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(Empty);
Vue.use(SubmitBar);
Vue.use(NavBar);
Vue.use(Divider);
export default {
  components: {
    //注册组件
    Container,
    Title,
    GoodsItem,
  },
  data() {
    return {
      cartData: [], //购物车数据
      clickNum: 0, //记录点击的次数
      editShow: true,
      PopularTitle:"人气推荐",
      goods:[],//人气推荐数据
    };
  },
  mounted() {
    var cart = localStorage.getItem("cartList");
    if (cart) {
      this.cartData = JSON.parse(cart);
    }
    // console.log(this.cartData);

     // 商品列表数据
    this.$APIShow.shop().then(res=>{
    // console.log(res.data.data);
    this.goods = res.data.data;
    this.goods = this.goods.splice(22,28);
    
    }).catch(err=>{
      console.log(err);
    })
    // 精选专题数据
     this.$APIShow.selected().then(res=>{
    // console.log(res.data.data);
    this.selectedData = res.data.data;
    }).catch(err=>{
      console.log(err);
    })
  },
  methods: {
    del(item) {
      //点击删除
      this.$store.commit(mutationTypes.ONDELETE, item);
      this.cartData = [...this.$store.state.cartList];
    },
    add(item) {
      //点击步进器+
      this.$store.commit(mutationTypes.ONCHANGEPLUS, item);
    },
    minus(item) {
      //点击减号
      this.$store.commit(mutationTypes.ONCHANGEMINES, item);
    },
    clickCheck(item) {
      //点击改变复选框的状态
      this.$store.commit(mutationTypes.ONCHANGECHECKBOX, item);
      this.cartData = [...this.$store.state.cartList];
    },
    onClickLeft() {
      //点击编辑
      this.clickNum++;
      if (this.clickNum % 2 == 1) {
        this.editShow = false;
        this.$refs.left.innerHTML = "完成";
      } else {
        this.editShow = true;
        this.$refs.left.innerHTML = "编辑";
      }
    },
    onSubmit(){//点击进入购买页面
        var temp = this.cartData.find(ele=>{
          return ele.checked == true
        })
        if(temp){
          this.$router.pushRouteByQuery("/order")
        }
    }
  },
  computed: {
    allChecked: {
      //获取全选的状态
      get() {
        return this.$store.state.cartList.every((ele) => {
          return ele.checked == true;
        });
      },
      set(newVal) {
        this.$store.commit(mutationTypes.ONALLCHECKED, newVal);
        this.cartData = [...this.$store.state.cartList];
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.cart_top_nav {
  width: 100%;
  height: 3.2rem;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
}
.cart_hidden {
  width: 100%;
  height: 3.2rem;
}
.cart_bottom_hideen {
  width: 100%;
  height: 6.4rem;
}
.cart_checked {
  height: 5.02rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.delete-button {
  height: 5.02rem;
}
。.custom-image .van-empty__image {
  width: 4.5rem;
  height: 4.5rem;
}
.left_title {
  color: red;
}
.van-submit-bar {
  bottom: 3.25rem;
}
</style>